<template>
  <div class="concern">
    <!-- 常访问 -->
    <section class="often-visit">
      <div>
        <span>最常访问</span>
        <span class="fs-color-6">查看更多></span>
      </div>
      <div class="often-visit-user">
        <div class="user-item" v-for="item in 3" :key="item">
          <van-image src="https://img.yzcdn.cn/vant/cat.jpeg" width="50px" height="50px" round></van-image>
          <van-badge dot class="online-dot"></van-badge>
          <div>用户昵称</div>
        </div>
      </div>
    </section>
    <!-- 用户发布列表 -->
    <div>
      <Publish v-for="item in 10" :key="item" :genre="item"></Publish>
    </div>
  </div>
</template>

<script setup>
import Publish from './components/publish.vue'
</script>

<style scoped lang='scss'>
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.fs-color-6 {
  color: #666666;
}
.often-visit {
  & > div:nth-of-type(1) {
    @extend .flex-center;
    justify-content: space-between;
  }
}
.concern {
  padding: 15px 10px;
}
.often-visit-user {
  display: flex;
  overflow-y: scroll;
  margin-bottom: 30px;
  .user-item {
    margin-right: 6px;
    .online-dot {
      position: relative;
      right: 13px;
    }
  }
}
</style>